TIL

190412_TIL(transition, transform, IR, hexo menu, jsfiddle)

4월 12일 (금)

  • transition(전이) 속성과 transform(변형) 속성에 대하여 배웠다.

Transition(전이)

요소 박스에 지정된 속성이 점진적으로 변환하는 기능을 의미. 애니메이션 효과를 적용할 수 있다.

Transform(변형)

요소 박스의 크기 변형 및 회전, 기울임 등을 지정할 수 있다. 2차원 변형 뿐만 아니라 3차원 변형도 가능하다.

  • IR(Image Replacement) 기법 중 Glider/Levin Method에 대하여 배웠다.

IR(Image Replacement)

안내문을 디자인상의 이유로 일반 텍스트가 아닌 이미지로 게시해야 하는 등의 상황. 또는 웹 페이지를 개발할 때 스크린리더 사용자에게 특정 이미지에 대한 추가 설명을 제공해야 할 때도 있다. 이렇게 이미지를 볼 수 없는 사용자에게 대체된 텍스트를 제공하는 것을IR(Image Replacement) 기법이라고 한다.

Glider/Levin Method

이미지로 대체할 엘리먼트 내에 빈 span 태그를 추가하여 배경이미지를 설정하고 position: absolute 스타일을 이용하여 글자를 덮는 방법.

  • hexo 블로그의 메뉴와 카테고리를 만들었다.

hexo 블로그 메뉴와 카테고리 만들기

메뉴와 카테고리를 만드는 방법은 생각보다 훨씬 간단했다. 방법을 찾느라 많은 시간을 보낸게 허무할 정도.

  1. hexo에 포스트 할 .md 파일 최상단에 있는 Front-matter 영역의 다음과 같이 categories를 추가한다. 블로그의 WEB이라는 새로운 메뉴와 카테고리가 생성된다. 이미 생성된 categories를 입력하면 관련 메뉴 및 카테고리 내로 글이 분류된다.
1
2
3
4
title: test 
date: 2019-04-13 02:33:34
categories: WEB
--------------------------------------------
  1. 하위 메뉴를 생성하기 위해서는 다음과 같이 입력한다. 블로그의 WEB이라는 메뉴의 하위 메뉴로 HTML이 생성된다.
1
2
3
4
5
6
title: test 
date: 2019-04-13 02:33:34
categories:
- WEB
- HTML
 --------------------------------------------
  • jsfiddle이라는 웹사이트를 이용하여 블로그 내에 html, css , javascript 등의 코드와 그 실행결과를 바로 보여줄 수 있는 방법을 찾았다.
Share